<template>
	<view class="wrap safe-area flex column align-center">
		<view class="wrap-white-bg">
			<block v-for="(item, index) in list" :key="index">
				<block v-if="item.type === 'ocr' && item.direct === 'row'">
					<rowOCR :item="item" v-model="dataInfo[item.key]" ocrType="BankCard" @ocrData="onOcrData" />
				</block>

				<block v-else-if="item.type === 'choose' && item.direct === 'row'">
					<rowChoose :item="item" v-model="dataInfo[item.key]" />
				</block>

				<block v-else-if="item.type === 'input' && item.direct === 'row'">
					<rowInput :item="item" v-model="dataInfo[item.key]" />
				</block>

				<block v-else-if="item.type === 'code' && item.direct === 'row'">
					<rowCode :mobile="dataInfo.mobile" :item="item" v-model="dataInfo[item.key]" />
				</block>

				<block v-else-if="item.type === 'bank'">
					<wrapBank :item="item" v-model="dataInfo[item.key]" :bankCode.sync="dataInfo.bankCode" />
				</block>
			</block>
		</view>

		<view class="sure-btn theme-gradient-btn f-34" @click="onAdd">添加银行卡</view>
	</view>
</template>

<script>
	import { addBankCard } from "@/API/bank.js";
	import rowOCR from "@/components/form/rowOCR.vue";
	import rowChoose from "@/components/form/rowChoose.vue";
	import rowInput from "@/components/form/rowInput.vue";
	import rowCode from "@/components/form/rowCode.vue";
	import wrapBank from "@/components/form/bank.vue";
	export default {
		components: {
			rowOCR,
			rowChoose,
			rowInput,
			rowCode,
			wrapBank,
		},
		data() {
			return {
				list: [
					{
						title: "卡号",
						require: true,
						type: "ocr",
						key: "cardCode",
						mode: "number",
						maxlength: 20,
						direct: "row",
						place: "请点击图表识别银行卡信息",
						tips: "请填写/识别银行卡信息",
					},
					{
						title: "银行",
						require: true,
						type: "bank",
						key: "bankName",
						place: "请识别",
						list: [],
						tips: "请选择银行",
						isArrow: false,
					},
					{
						title: "开户支行区域",
						require: true,
						type: "choose",
						key: "area",
						mode: "region",
						direct: "row",
						place: "请选择所在地区",
						list: [],
						tips: "请选择所在地区",
						isArrow: true,
					},
					{
						title: "开户支行",
						require: true,
						type: "input",
						key: "bankbranch",
						place: "请输入开户支行",
						mode: "text",
						maxlength: 100,
						direct: "row",
						tips: "请输入开户支行",
					},
					{
						title: "账户名",
						require: true,
						type: "input",
						key: "username",
						place: "请输入账户名",
						mode: "text",
						maxlength: 100,
						direct: "row",
						tips: "请输入账户名",
					},
					{
						title: "银行行号",
						require: true,
						type: "input",
						key: "banklinenum",
						place: "请输入银行行号",
						mode: "number",
						maxlength: 100,
						direct: "row",
						tips: "请输入银行行号",
					},
					{
						title: "预留手机号",
						require: true,
						type: "input",
						key: "mobile",
						place: "请输入预留手机号",
						mode: "tel",
						maxlength: 11,
						direct: "row",
						tips: "请输入预留手机号",
					},
					{
						title: "验证码",
						require: true,
						type: "code",
						key: "code",
						place: "请输入验证码",
						mode: "number",
						maxlength: 6,
						direct: "row",
						tips: "请输入验证码",
					},
				],

				dataInfo: {
					cardCode: "", //卡号
					bankCode: "", //银行代码
					bankName: "", //银行名称
					area: "", //开户支行区域
					bankbranch: "", //开户支行
					username: "", //账户名
					banklinenum: "", //银行行号
					mobile: "", //预留手机号
					code: "", //验证码
				},
			};
		},
		methods: {
			/**
			 * ocr识别
			 */
			onOcrData(res) {
				this.dataInfo.bankName = res.BankName;
				this.dataInfo.cardCode = res.CardNumber;
				this.dataInfo.bankCode = res.BankCode;
			},
			/**
			 * 添加银行卡
			 */
			onAdd() {
				if (this.$filters.judgeFormList(this.list, this.dataInfo)) {
					this.$throttle(() => {
						addBankCard(this.dataInfo).then((res) => {
							this.$st.success("添加成功", () => {
								uni.navigateBack();
							});
						})
					})
				}
			},
		},
	};
</script>

<style>
	@import "@/css/publish.css";
</style>
